﻿@using Jb.Web.Utility
@{
    ViewBag.Title = Html.GetPageTitle("Home");
    Layout = null;
    //Jb.Web.ViewModels.UtilityModels.PagerConfig _PagerConfig = ViewBag.PagerConfig as Jb.Web.ViewModels.UtilityModels.PagerConfig;
    ViewData[AppConstants.ViewDataKeys.IS_HOMEPAGE] = true;
    List<Jb.Web.ViewModels.CategoryViewModel> _Categories = (from P in ApplicationCache.Categories where P.ParentCategory == null select P).ToList();
    List<String> _Colors = new List<String> {"blue", "purple", "green", "yellow", "red" };
    int _JobCountIncrementer = 2000;

    Jb.Domain.JbEntities context = new Jb.Domain.JbEntities();
    var _FeaturedJobs = (from P in context.Jobs 
                        where P.IsFeatured
                            && P.Company.IsActive 
                            && P.IsActive 
                            && P.IsDeleted == false 
                        select new { ID = P.ID, Title = P.Title, Url = P.Url })
                        .Take(5);
                        
    var _FeaturedCompanies = (from P in context.Companies
                              where P.IsActive
                              select new { ID = P.ID, Url = P.Url, Name = P.Name })
                             .Take(5);
}

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>    
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="@Url.Content("~/Content/Bootstrap/css/bootstrap.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Bootstrap/css/bootstrap-responsive.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/flexslider.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/NewDesign.css")" rel="stylesheet" type="text/css" />
    <style type="text/css">
        /***
        Dashboard stats
        ***/
        .dashboard-stat {margin-bottom: 25px;}
        .dashboard-stat:before, .dashboard-stat:after { display: table; line-height: 0; content: "";}
        .dashboard-stat:after { clear: both;}
        .dashboard-stat .visual { width: 1px; height:80px; display: block; float: left; padding-top: 10px; padding-left: 15px; }
        .dashboard-stat .visual i {
          font-size: 65px;
          color: #fff;
        }

        .dashboard-stat .details 
        {   
          min-height:80px;  
          padding: 0px 10px 10px 10px;
        }

        .dashboard-stat .details .number {    
          padding-top: 25px;
          text-align: right;
          font-size: 34px;
          letter-spacing: -1px;
          font-weight: 300;
          color: #fff;
          margin-bottom: 10px;
        }

        .dashboard-stat .details .desc {
          text-align: right;
          font-size: 16px;
          letter-spacing: 0px;
          font-weight: 300;
          color: #fff;
        }

        .dashboard-stat .more {
          clear: both;
          display: block;
          padding: 5px 10px 5px 10px;
          text-transform: uppercase;
          font-weight: 300;
          font-size: 11px;
          color: #fff;  
          opacity: 0.7;  
          filter: alpha(opacity=70);
        }  

        .dashboard-stat .more i {
          margin-top: 4px;
          float: right;
        }

        .dashboard-stat .more:hover {
          text-decoration: none;
          -webkit-transition: all 0.1s ease-in-out;
          -moz-transition: all 0.1s ease-in-out;
          -o-transition: all 0.1s ease-in-out;
          -ms-transition: all 0.1s ease-in-out;
          transition: all 0.1s ease-in-out;
          opacity: 1;  
          filter: alpha(opacity=100);
        }

        .dashboard-stat.blue {
          background-color: #27a9e3;
        }

        .dashboard-stat.blue .more { 
          background-color: #208dbe;
        } 

        .dashboard-stat.green {
          background-color: #28b779;
        }

        .dashboard-stat.green .more { 
          background-color: #10a062;
        } 

        .dashboard-stat.red {
          background-color: #e7191b;
        }

        .dashboard-stat.red .more { 
          background-color:#bc0d0e;
        } 

        .dashboard-stat.yellow {
          background-color: #ffb848;
        }

        .dashboard-stat.yellow .more { 
          background-color: #cb871b;
        } 

        .dashboard-stat.purple {
          background-color: #852b99;
        }

        .dashboard-stat.purple .more { 
          background-color: #6e1881;
        }
        /***** Dashboard Tile Styles End *******/

        /***** Metro Arrows Start *****/
        /***
        Metro icons
        ***/
        [class^="m-icon-"] {
          display: inline-block;
          width: 14px;
          height: 14px;
          margin-top: 4px;
          line-height: 14px;  
          vertical-align: top;
          background-image: url(Content/Images/metro-icons.png);
          background-position: 0 0;
          background-repeat: no-repeat; 
        }

        [class^="m-icon-big-"] {
          display: inline-block;
          width: 30px;
          height: 30px; 
          margin: 6px;
          vertical-align: top;
          background-image: url(Content/Images/metro-icons.png);
          background-position: 0 0px;
          background-repeat: no-repeat; 
        }
        .m-icon-white {
          background-image: url(Content/Images/metro-icons-white.png);
        }
        .m-icon-swapright {
          background-position: -27px -10px;
        }
        .m-icon-swapdown {
          background-position: -68px -10px;
        }
        .m-icon-swapleft {
          background-position: -8px -10px;
        }
        .m-icon-swapup {
          background-position: -46px -10px;
        }
        .m-icon-big-swapright{
          background-position: -42px -28px;
        }
        .m-icon-big-swapdown{
          background-position: -115px -28px;
        }
        .m-icon-big-swapleft{
          background-position: -6px -28px;
        }
        .m-icon-big-swapup{
          background-position: -78px -28px;
        }
        /***** Metro Arrows End   *****/

    </style>
</head>
<body>
    @Html.Partial("_Header")    

    <div class="container">
        <div class="row-fluid">
            <div class="flexslider span12">
                <ul class="slides">
                    <li>
                        <div class="jb-slider-box">
                            <h1>Job Board Enterprise Redefined.</h1>
                            <div>                                
                                <ul>
                                    <li>Most finely tuned Job Board ever! Compatible with any devices and integrations made easy.</li>
                                    <li>Now JobBoard is compatible in any device, with modern responsive UI design technology.</li>
                                    <li>Search Engine Optimization (SEO) friendly architecture and design. Means more visitors to your site.</li>
                                    <li>Built with cutting edge technologies like ASP .NET MVC, Entity Framework and lot more.</li>                                    
                                </ul>
                            </div>
                            <div class="button">
                                <a href="#myModal" class="btn btn-primary btn-large" data-toggle="modal">Get Started</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="jb-slider-box">
                            <h1>Industry Leading Job and Resume Search Engine</h1>
                            <div>
                                <ul>
                                    <li>JobBoard's Index based search engine gives you the Enterprise grade searching performance and acurate results.</li>
                                    <li>Lightning fast index based searching, with customized searching facility like exact match, or/ and search.</li>
                                    <li>JobBoard's search engine is capable to deliver google like abstract matching (at some extent).</li>
                                    <li>ZGL based customized data structure for Jobs and searching mechanism.</li>
                                </ul>
                            </div>
                            <div class="button">
                                <a href="/Job/Search" class="btn btn-primary btn-large" data-toggle="modal">Try Search</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="jb-slider-box">
                            <h1>Apply on Jobs and Search Resumes with an ease.</h1>
                            <div>
                                <ul>
                                    <li>Now job seekers can apply to their favourite jobs with a single click.</li>
                                    <li>Job Seekers are allowd to upload resume in their own format (*.docx, *.pdf etc). And they will be ready to search immediately.</li>
                                    <li>Employers can manage their short listed applications and invite for an interview in a convenient way.</li>
                                    <li>Resume search made easy and perfect, to present you with most relevent candidates for your company.</li>
                                </ul>
                            </div>
                            <div class="button">
                                <a href="#myModal" class="btn btn-primary btn-large" data-toggle="modal">Take a Tour</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="jb-slider-box">
                            <h1>Template based Job Details Page</h1>
                            <div>
                                <ul>
                                    <li>Employers can advertise their jobs in their own customized HTML template.</li>
                                    <li>Also employers can use their own companies interface for the Job Details.</li>
                                    <li>We can build your customized job template for your jobs.</li>                                    
                                </ul>
                            </div>
                            <div class="button">
                                <a href="#myModal" class="btn btn-primary btn-large" data-toggle="modal">Check a Sample</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row-fluid">
            <!--Left Metro UI Panel Start -->
            <div class="span9"> 
                @if (_Categories.Count > 0)
                {
                    for (int i = 0; i < _Categories.Count; i++)
                    {
                        String _Color = _Colors[(i % _Colors.Count)];
                        Jb.Web.ViewModels.CategoryViewModel _Category = _Categories[i];
                        if ((i % 3) == 0)
                        {
                            @:<div class="row-fluid">
                        }
                        ///HTML Generation code should be here
                        <div class="span4">
                            <div class="dashboard-stat @(_Color)">
                                <div class="visual"></div>
                                <div class="details">
                                    <div class="number">@(String.Format("{0:0,0}", (_JobCountIncrementer + _Category.ActiveJobCount)))</div>
                                    <div class="desc">@_Category.Name</div>
                                </div>
                                <a href="/Job/Category/@(_Category.UrlName)" class="more">View more <i class="m-icon-swapright m-icon-white"></i></a>                 
                            </div>
                        </div>
                        ///End Tag Checking
                        if (i == (_Categories.Count - 1) || ((i + 1) % 3) == 0) {
                            @:</div>
                            <div class="clearfix"></div>
                        }
                    }
                }               
                @*<div class="row-fluid">
                    <div class="span4">
                        <div class="dashboard-stat blue">
                            <div class="visual"><!--<i class="icon-comments"></i>--></div>
                            <div class="details">
                                <div class="number">542</div>
                                <div class="desc">Tele Communications</div>
                            </div>
                            <a href="#" class="more">View more <i class="m-icon-swapright m-icon-white"></i></a>                 
                        </div>
                    </div>
                    <div class="span4">
                        <div class="dashboard-stat purple">
                            <div class="visual"><!--<i class="icon-comments"></i>--></div>
                            <div class="details">
                                <div class="number">1,349</div>
                                <div class="desc">Marketing</div>
                            </div>
                            <a href="#" class="more">View more <i class="m-icon-swapright m-icon-white"></i></a>                 
                        </div>
                    </div>
                    <div class="span4">
                        <div class="dashboard-stat green">
                            <div class="visual"><!--<i class="icon-comments"></i>--></div>
                            <div class="details">
                                <div class="number">1,478</div>
                                <div class="desc">Information Technology</div>
                            </div>
                            <a href="#" class="more">View more <i class="m-icon-swapright m-icon-white"></i></a>                 
                        </div>
                    </div>                    
                </div>
                <div class="clearfix"></div>
                <div class="row-fluid">                    
                    <div class="span4 pull-left">
                        <div class="dashboard-stat yellow">
                            <!--<div class="visual"><i class="icon-comments"></i></div>-->
                            <div class="details">
                                <div class="number">1,478</div>
                                <div class="desc">Information Technology</div>
                            </div>
                            <a href="#" class="more">View more <i class="m-icon-swapright m-icon-white"></i></a>                 
                        </div>
                    </div>

                    <div class="span4">
                        <div class="dashboard-stat red">
                            <!--<div class="visual"><i class="icon-comments"></i></div>-->
                            <div class="details">
                                <div class="number">1,478</div>
                                <div class="desc">Informat Technology</div>
                            </div>
                            <a href="#" class="more">View more <i class="m-icon-swapright m-icon-white"></i></a>                 
                        </div>
                    </div>
                    <div class="span4">
                        <div class="dashboard-stat blue">
                            <div class="visual"><!--<i class="icon-comments"></i>--></div>
                            <div class="details">
                                <div class="number">1,478</div>
                                <div class="desc">Information Technology</div>
                            </div>
                            <a href="#" class="more">View more <i class="m-icon-swapright m-icon-white"></i></a>                 
                        </div>
                    </div>
                </div>*@
            </div>
            <!--Left Metro UI Panel End-->

            <!--Right Side Panel Start-->
            <div class="span3">
                <ul class="nav nav-list jb-container jb-shadow">
                    <li class="nav-header">Featured Jobs</li>
                    @foreach (var job in _FeaturedJobs)
                    {
                        <li><a href="@(Url.JobDetailsUrl(job.ID, job.Url))">@(job.Title)</a></li>   
                    }
                    @*<li><a href="#">ASP .NET Developer</a></li>
                    <li><a href="#">Chief Marketing Executive</a></li>
                    <li><a href="#">Development Manager</a></li>
                    <li><a href="#">Team Lead for a PHP Team</a></li>*@
                </ul>
                <div>&nbsp;</div>
                <ul class="nav nav-list jb-container jb-shadow">
                    <li class="nav-header">Featured Companies</li>
                    @foreach (var company in _FeaturedCompanies)
                    {                        
                        <li><a href="/@(company.Url)">@company.Name</a></li>
                    }
                    @*<li><a href="#">Metatude Asia Ltd.</a></li>
                    <li><a href="#">Saudi Arabai Bangladesh</a></li>
                    <li><a href="#">Apple Inc.</a></li>*@
                </ul>
            </div>
            <!--Right Side Panel End-->
        </div>
    </div>   
    
    @Html.Partial("_Footer")
    <div id="divLoadingAnimation"><img src="@Url.Content("~/")Content/images/loading.gif" alt="Loading" title="Loading" /></div>
    <div id="divBlockingContainer"></div>
    <script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>    
    <script src="@Url.Content("~/Content/Bootstrap/js/bootstrap.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/flexslider.js")" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(window).load(function () {
            $('.flexslider').flexslider({
                animation: "slide", //"fade"
                slideshowSpeed: 7000
            });
        });
    </script>
</body>  
 </html>